<template>
    <el-dialog
      v-model="visible"
      title="任务详情"
      width="80%"
      :before-close="handleClose"
      draggable
      destroy-on-close
    >
      <div v-if="task" class="task-detail">
        <!-- 基本信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">基本信息</span>
              <el-tag :type="getStatusType(task.taskStatus)" size="large">
                {{ task.taskStatus }}
              </el-tag>
            </div>
          </template>
          
          <el-row :gutter="24">
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>任务名称:</label>
                <div class="info-value">{{ task.taskName }}</div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>任务等级:</label>
                <div class="info-value">{{ task.taskLevel }}</div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>发起人:</label>
                <div class="info-value">
                  <el-avatar :size="24" style="margin-right: 8px;">
                    {{ task.initiator.charAt(0) }}
                  </el-avatar>
                  {{ task.initiator }}
                </div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>岗位需求:</label>
                <div class="info-value">
                  <el-tag :type="getPositionType(task.positionRequirement)">
                    {{ task.positionRequirement }}
                  </el-tag>
                </div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>人数需求:</label>
                <div class="info-value">{{ task.personnelCount }}人</div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="8">
              <div class="info-item">
                <label>截止日期:</label>
                <div class="info-value" :class="{ 'urgent': isDeadlineUrgent(task.deadline) }">
                  <el-icon><Calendar /></el-icon>
                  {{ task.deadline }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
  
        <!-- 任务时间安排 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">时间安排</span>
            </div>
          </template>
          
          <el-row :gutter="24">
            <el-col :xs="24" :sm="12">
              <div class="info-item">
                <label>开始时间:</label>
                <div class="info-value time-value start-time">
                  <el-icon><Timer /></el-icon>
                  {{ task.workHours.startDate }}
                </div>
              </div>
            </el-col>
            
            <el-col :xs="24" :sm="12">
              <div class="info-item">
                <label>结束时间:</label>
                <div class="info-value time-value end-time">
                  <el-icon><Timer /></el-icon>
                  {{ task.workHours.endDate }}
                </div>
              </div>
            </el-col>
          </el-row>
          
          <div class="timeline-container">
            <el-timeline>
              <el-timeline-item
                timestamp="计划开始"
                :color="new Date(task.workHours.startDate) <= new Date() ? '#67c23a' : '#909399'"
              >
                {{ task.workHours.startDate }}
              </el-timeline-item>
              <el-timeline-item
                timestamp="计划结束"
                :color="new Date(task.workHours.endDate) <= new Date() ? '#67c23a' : '#e6a23c'"
              >
                {{ task.workHours.endDate }}
              </el-timeline-item>
              <el-timeline-item
                timestamp="截止日期"
                :color="isDeadlineUrgent(task.deadline) ? '#f56c6c' : '#409eff'"
              >
                {{ task.deadline }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
  
        <!-- 任务内容 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">任务内容</span>
            </div>
          </template>
          
          <div class="task-content-detail">
            {{ task.taskContent }}
          </div>
        </el-card>
  
        <!-- 人员信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">人员信息</span>
            </div>
          </template>
          
          <el-row :gutter="24">
            <el-col :xs="24" :md="12">
              <div class="personnel-section">
                <h4>报名人员 ({{ task.applicants.length }}人)</h4>
                <div class="personnel-list">
                  <div 
                    v-for="applicant in task.applicants" 
                    :key="applicant"
                    class="personnel-item applicant-item"
                  >
                    <el-avatar :size="32">{{ applicant.charAt(0) }}</el-avatar>
                    <span class="personnel-name">{{ applicant }}</span>
                    <el-tag type="info" size="small">报名中</el-tag>
                  </div>
                  <div v-if="task.applicants.length === 0" class="no-personnel">
                    暂无报名人员
                  </div>
                </div>
              </div>
            </el-col>
            
            <el-col :xs="24" :md="12">
              <div class="personnel-section">
                <h4>承接人员 ({{ task.assignees?.length || 0 }}人)</h4>
                <div class="personnel-list">
                  <div 
                    v-for="assignee in task.assignees" 
                    :key="assignee"
                    class="personnel-item assignee-item"
                  >
                    <el-avatar :size="32">{{ assignee.charAt(0) }}</el-avatar>
                    <span class="personnel-name">{{ assignee }}</span>
                    <el-tag type="success" size="small">已承接</el-tag>
                  </div>
                  <div v-if="!task.assignees || task.assignees.length === 0" class="no-personnel">
                    暂无承接人员
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
  
        <!-- 附件信息 -->
        <el-card shadow="never" class="detail-card" v-if="task.attachments && task.attachments.length > 0">
          <template #header>
            <div class="card-header">
              <span class="card-title">附件信息</span>
              <el-tag type="info" size="small">{{ task.attachments.length }}个文件</el-tag>
            </div>
          </template>
          
          <div class="attachments-section">
            <div 
              v-for="(attachment, index) in task.attachments" 
              :key="index"
              class="attachment-item"
            >
              <el-icon class="attachment-icon" size="24">
                <Document />
              </el-icon>
              <span class="attachment-name">{{ attachment }}</span>
              <div class="attachment-actions">
                <el-button type="primary" size="small" text @click="previewAttachment(attachment)">
                  预览
                </el-button>
                <el-button type="success" size="small" text @click="downloadAttachment(attachment)">
                  下载
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
  
        <!-- 操作记录 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">操作记录</span>
            </div>
          </template>
          
          <el-timeline class="operation-timeline">
            <el-timeline-item
              v-if="task.updatedAt"
              timestamp="最后更新"
              color="#409eff"
            >
              <div class="timeline-content">
                <span>任务信息已更新</span>
                <div class="timeline-time">{{ task.updatedAt }}</div>
              </div>
            </el-timeline-item>
            
            <el-timeline-item
              timestamp="任务创建"
              color="#67c23a"
            >
              <div class="timeline-content">
                <span>{{ task.initiator }} 创建了任务</span>
                <div class="timeline-time">{{ task.createdAt }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
  
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
          <el-button type="primary" @click="handleEdit">编辑任务</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { computed, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Calendar, Timer, Document } from '@element-plus/icons-vue';
  
  interface TaskInfo {
    id: number;
    initiator: string;
    taskLevel: string;
    taskName: string;
    positionRequirement: string;
    taskContent: string;
    personnelCount: number;
    applicants: string[];
    assignees: string[];
    workHours: {
      startDate: string;
      endDate: string;
    };
    deadline: string;
    taskStatus: string;
    attachments: string[] | null;
    createdAt?: string;
    updatedAt?: string;
  }
  
  interface Props {
    visible: boolean;
    task: TaskInfo | null;
  }
  
  interface Emits {
    (e: 'update:visible', value: boolean): void;
    (e: 'refresh'): void;
  }
  
  const props = defineProps<Props>();
  const emit = defineEmits<Emits>();
  
  const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  });
  
  const handleClose = () => {
    visible.value = false;
  };
  
  const handleEdit = () => {
    handleClose();
    // 这里可以触发编辑事件
    ElMessage.info('编辑功能待实现');
  };
  
  const getStatusType = (status: string) => {
    const statusMap: Record<string, string> = {
      '已承接': 'success',
      '未承接': 'warning',
      '任务结束': 'info'
    };
    return statusMap[status] || 'info';
  };
  
  const getPositionType = (position: string) => {
    const positionMap: Record<string, string> = {
      '科研助理': 'success',
      '业务秘书': 'primary',
      '技术开发': 'warning'
    };
    return positionMap[position] || 'info';
  };
  
  const isDeadlineUrgent = (deadline: string) => {
    const today = new Date();
    const deadlineDate = new Date(deadline);
    const diffTime = deadlineDate.getTime() - today.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays <= 7 && diffDays >= 0;
  };
  
  const previewAttachment = (filename: string) => {
    ElMessage.info(`预览文件: ${filename}`);
    // 这里实现文件预览功能
  };
  
  const downloadAttachment = (filename: string) => {
    ElMessage.success(`下载文件: ${filename}`);
    // 这里实现文件下载功能
  };
  </script>
  
  <style lang="scss" scoped>
  .task-detail {
    .detail-card {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #000;
        }
      }
    }
    
    .info-item {
      margin-bottom: 16px;
      
      label {
        display: block;
        font-size: 14px;
        color: #909399;
        margin-bottom: 4px;
      }
      
      .info-value {
        font-size: 14px;
        color: #000;
        display: flex;
        align-items: center;
        
        &.urgent {
          color: #f56c6c;
          font-weight: 500;
        }
        
        &.time-value {
          .el-icon {
            margin-right: 6px;
          }
          
          &.start-time {
            color: #67c23a;
          }
          
          &.end-time {
            color: #e6a23c;
          }
        }
      }
    }
    
    .timeline-container {
      margin-top: 20px;
    }
    
    .task-content-detail {
      line-height: 1.6;
      color: #606266;
      font-size: 14px;
      padding: 10px;
      background: #f8f9fa;
      border-radius: 6px;
      border-left: 4px solid #409eff;
    }
    
    .personnel-section {
      h4 {
        margin: 0 0 16px 0;
        color: #000;
        font-size: 15px;
      }
      
      .personnel-list {
        .personnel-item {
          display: flex;
          align-items: center;
          padding: 12px;
          margin-bottom: 8px;
          background: #f8f9fa;
          border-radius: 8px;
          
          .personnel-name {
            flex: 1;
            margin-left: 12px;
            font-size: 14px;
            color: #606266;
          }
          
          &.applicant-item {
            border-left: 4px solid #409eff;
          }
          
          &.assignee-item {
            border-left: 4px solid #67c23a;
          }
        }
        
        .no-personnel {
          text-align: center;
          color: #909399;
          padding: 20px;
          font-size: 14px;
        }
      }
    }
    
    .attachments-section {
      .attachment-item {
        display: flex;
        align-items: center;
        padding: 12px;
        margin-bottom: 8px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #409eff;
        
        .attachment-icon {
          color: #409eff;
          margin-right: 12px;
        }
        
        .attachment-name {
          flex: 1;
          font-size: 14px;
          color: #000;
        }
        
        .attachment-actions {
          display: flex;
          gap: 8px;
        }
      }
    }
    
    .operation-timeline {
      .timeline-content {
        .timeline-time {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  
  // 响应式样式
  @media (max-width: 768px) {
    .task-detail {
      .personnel-section {
        margin-bottom: 20px;
      }
    }
  }
  </style>
  
  <style lang="scss">
  .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }
  </style>